import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import * as Icon from '@ant-design/icons';
import Routers from "../../router"
import { Link } from "react-router-dom"
const { Sider } = Layout;
const { SubMenu } = Menu;

export default class index extends Component {
    clickLink = (routeObj) => {
        this.props.getNowPath(routeObj)
    }

    // 处理一级菜单栏
    renderMenu = ({ title, path, icon, component }) => {
        return (
            <Menu.Item key={path} icon={React.createElement(Icon[icon])}>
                <Link to={path} onClick={() => this.clickLink({ path, component })}>
                    {title}
                </Link>
            </Menu.Item>
        )
    }
    // 处理子级菜单栏
    renderSubMnenu = ({ title, path, child, icon }) => {
        return (
            <SubMenu key={path} title={title} icon={React.createElement(Icon[icon])}>
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item)
                    })
                }
            </SubMenu>
        )
    }
    render() {
        return (
            <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['/home']}>
                    {
                        Routers && Routers.map(firstItem => {
                            return firstItem.child && firstItem.child.length > 0 ?
                                // 显示二级菜单
                                this.renderSubMnenu(firstItem) :
                                // 显示一级菜单
                                this.renderMenu(firstItem)
                        })
                    }
                </Menu>
            </Sider>
        )
    }
}
